<template>
  <div>
    <headers></headers>
    <!--<carousel></carousel>-->
    <p class="banner padding88"><img :src="sliderImg" alt="" height="200px" width="100%"></p>
    <div class="divider ">
      <div class="auto">
        <router-link to="/">首页</router-link><span>></span>行业学院
      </div>
    </div>
    <div class="auto padding250">
      <div class="auto">
        <div class="container clearfix font14" v-html=html style="text-align: left;">
        </div>
      </div>
    </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }
  .banner{
    height: 260px;
  }
  .divider{
    height: 53px;
    background-color: #fff;
    font-size: 14px;
    color: #957960;
    line-height: 53px;
    text-align: left;
    margin-bottom: 30px;
    box-shadow: 5px 1px 10px #ccc;
    a{
      color: #957960;
      &:hover{
        color: #9C7649;
        font-weight: 700;
      }
    }
    span{
      margin: 0 10px;
    }
  }
  form{
    width: 360px;
    margin:50px  0 0 50px ;
  }
  .title{
    font-size: 20px;
    color: #000;
    margin: 20px 0 25px 0;
    text-align: left;
    padding: 15px 20px ;
    background-color: #fff;
  }
  .sex .ivu-form-item-content{
    text-align: left;
  }
  .ceping_form .ivu-date-picker{
    width: 250px;
  }
  .container {
    background-color: #fff;
    padding: 0px 41px;
    line-height: 30px;
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import carousel from '../template/carousel'
  import {getStore} from "../../storage";
  import {getHtmlWeb,sliderPC} from '../../http'
  export default {
        name: '',
        props: {},
        data() {
            return {
              html:'',
              sliderImg:'',
              isSpinShow:false,
            };
        },
        methods: {
          getZhuanhuan() {
            if (this.isSpinShow === false) {
              this.isSpinShow = true;
              //获取封面图
              sliderPC({sliderType:'10'}).then(res =>{
                this.sliderImg = res.data.slider.sliderImg;
              }).catch()
              //获取页面
              getHtmlWeb({type: 'college'}).then(res => {
                this.isSpinShow = false;
                this.html = res.data.html.htmlContent;
              }).catch()
            }
          }
        },
        created() {
          this.getZhuanhuan()
        },
      components: {
        headers,
        footers,
        carousel
      }
    }
</script>
